﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 防抖，当一个按钮，你拼命点击，我就不处理，等你什么时候消停了，我取你最后一次点击作为有效的，然后请求后台接口，这个就是防抖
    // 我们直接使用 lodash 的 debounce 函数来实现防抖
    // 例如，下面是一个带有搜索框的页面，并且需要在用户停止输入 500 毫秒后才开始搜索：
    function search(keyword) {
        // 根据关键词进行搜索
        console.log(`Searching for '${keyword}'...`)
    }

    const inputEl = document.getElementById('search-input');

    // 创建 debounce 函数，最多每 500 毫秒执行一次 search 函数
    const debouncedSearch = _.debounce(search, 500);

    // 监听 input 变化，如果有变化则调用 debouncedSearch 函数
    // 每当出现输入变化时，我们会将输入内容传递给 `debouncedSearch` 函数，这个函数会将搜索操作延迟 500 毫秒后执行。因此，只有用户停止输入 500 毫秒之后，才会真正执行搜索操作
    inputEl.addEventListener('input', (evt) => {
        const keyword = evt.target.value.trim();
        debouncedSearch(keyword);
    });

    // 节流函数可以限制一个函数在一定时间范围内最多执行一次。也就是说，如果同一个函数在短时间内多次触发，这个函数只会以固定的频率执行。
    // 实际开发中，我们直接使用 lodash 的 throttle 函数来实现节流。
    // 例如，下面是一个点击按钮时，最多每隔 1 秒输出一次 log 的示例：
    function log() {
        console.log('Clicked!');
    }

    const btnEl = document.getElementById('click-button');

    // 创建 throttle 函数，最多每 1 秒执行一次 log 函数
    const throttledLog = _.throttle(log, 1000);

    // 监听 click 事件，如果有点击则调用 throttledLog 函数
    // 每当用户点击按钮时，我们会调用 `throttledLog` 函数，这个函数会通过限制函数的执行频率，保证每隔 1 秒钟输出一条日志。即使用户连续点击按钮，也只有第一次点击可以触发函数的执行，后续的点击都会被忽略
    btnEl.addEventListener('click', (evt) => {
        throttledLog();
    });
</script>
</body>
</html>